<template>
	<view class="uni-tabbar">
		<view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
			<view v-if="true" class="uni-tabbar__bd">
				<view class="uni-tabbar__icon">
					<image v-if="item.pagePath == pagePath" :class="[index==2 ?'release':'']" class="uni-w-42 uni-h-42" mode="aspectFit"
					 :src="item.selectedIconPath"></image>
					<image v-else class="uni-w-42 uni-h-42" :class="[index==2 ?'release':'']" mode="aspectFit" :src="item.iconPath"></image>
					<image src="/static/icon/白色发布.png" v-if="index==2" class="add"></image>
				</view>
			</view>
			<view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			pagePath: null
		},
		data() {
			return {
				page: 'contact',
				showPage: false,
				containerHeight: 400,
				tabbar: [{
						"pagePath": "/pages/index/index",
						"iconPath": "/static/icon/蓝色首页.png",
						"selectedIconPath": "/static/icon/橙色首页.png",
						"text": "首页",
						"fontIcon": "icon-shouye"
					},
					{
						"pagePath": "/pages/knowledge/knowledge",
						"iconPath": "/static/icon/蓝色知识.png",
						"selectedIconPath": "/static/icon/橙色知识.png",
						"text": "知识",
						"fontIcon": "icon-shouye"
					},
					{
						"pagePath": "/pages/release/release",
						"iconPath": "/static/icon/蓝色猫头.png",
						"selectedIconPath": "/static/release-active.png",
						"text": "发布",
						"fontIcon": "icon-shouye",
						isPage: true
					},
					{
						"pagePath": "/pages/message/message",
						"iconPath": "/static/icon/蓝色消息.png",
						"selectedIconPath": "/static/icon/橙色消息.png",
						"text": "消息",
						"fontIcon": "icon-shouye"
					},
					{
						"pagePath": "/pages/profile/profile",
						"iconPath": "/static/icon/蓝色个人中心.png",
						"selectedIconPath": "/static/icon/橙色个人中心.png",
						"text": "个人中心",
						"fontIcon": "icon-shouye"
					},
				]
			};
		},
		mounted() {
			if (false) {
				this.tabbar.splice(1, 0, {
					"pagePath": "/pages/index/index",
					"iconPath": "/static/tabBar/home.png",
					"selectedIconPath": "/static/tabBar/home_col.png",
					"text": "首页",
					"fontIcon": "icon-shouye"
				}, )
			}
		},
		methods: {
			changeTab(item) {
				this.page = item.pagePath; // 这里使用reLaunch关闭所有的页面，打开新的栏目页面
				if (item.isPage) {
					uni.navigateTo({
						url: this.page
					});
				} else {
					uni.switchTab({
						url: this.page
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.add{
		position: absolute;
		width: 45upx;
		height: 45upx;
		left: 6upx;
		top: -34upx;
	}
	
	.uni-tabbar {
		position: fixed;
		bottom: 0;
		z-index: 999;
		width: 100%;
		display: flex;
		justify-content: space-around;
		height: 50px;
		padding: 16upx 0;
		box-sizing: border-box;
		border-top: solid 1upx #ccc;
		background-color: #fff;
		box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);

		.uni-tabbar__item {
			display: block;
			line-height: 24upx;
			font-size: 20upx;
			text-align: center;
		}

		.uni-tabbar__icon {
			height: 42upx;
			line-height: 42upx;
			text-align: center;
		}

		.icon {
			display: inline-block;
		}

		.uni-tabbar__label {
			line-height: 24upx;
			font-size: 24upx;
			color: #999;

			&.active {
				color: #000;
			}
		}
	}

	.uni-tabbar__icon {
		position: relative;
	}

	.uni-w-42 {
		margin: 0;
		padding: 0;
		width: 40rpx;
		height: 36rpx;
	}

	.release {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: -68rpx;
		left: -22rpx;
	}
</style>
